<template>
  <div class="container">
    <div class="qr-search">
      <div class="qr-search-header">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
          <el-form-item prop="distrName">
            <el-input
              type="number"
              ref="inputRef"
              placeholder="二维码查询"
              style="width: 400px"
              v-model="search"
              @change="scanQrCode"
              clearable
            >
              <template slot="append">
                <el-button type="primary" @click="scanQrCode"> 查询</el-button>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item
            prop="serializable"
            style="margin-left: 50px"
            v-hasPermi="['distribution:purchaseSkuSerializable:scrapOutWarehouse']"
          >
            <el-input
              v-model="queryParams.serializable"
              clearable
              placeholder="请扫描编码"
              @keyup.enter.native="handleQuery"
            >
              <el-select
                style="width: 120px"
                v-model="queryParams.outWarehouseType"
                slot="prepend"
                placeholder="出库类型"
              >
                <el-option label="过期销毁" :value="12" />
                <el-option label="损坏出库" :value="13" />
              </el-select>
              <el-button type="primary" slot="append" @click="handleScrap" size="mini">报废出库</el-button>
            </el-input>
          </el-form-item>
        </el-form>

        <el-row class="qr-search-header_info" :gutter="10">
          <el-col :span="5">sku:{{ detail.skuNo }}</el-col>
          <el-col :span="10">
            <div class="ellipsis" :title="detail.skuNameCn">中文名:{{ detail.skuNameCn }}</div>
          </el-col>
          <el-col :span="5">
            <!-- 产品是否会过期 0-否 1-是 -->
            是否过期产品:
            <span v-if="detail.isExpired == 0" style="color: green">{{ $t('否') }}</span>
            <span v-if="detail.isExpired == 1" style="color: red">{{ $t('是') }}</span>
          </el-col>
        </el-row>
        <el-row class="qr-search-header_info">
          <el-col :span="5">库位号:{{ detail.spNo }}</el-col>
          <el-col :span="10">
            <div class="ellipsis" :title="detail.skuNameJp">日文名: {{ detail.skuNameJp }}</div>
          </el-col>
          <el-col :span="5">过期时间:{{ detail.expiredTime }}</el-col>
        </el-row>
      </div>
      <div class="qr-search-content">
        <div class="qr-search-content__left">
          <el-steps direction="vertical" :active="-1" finish-status="success">
            <el-step title="采购" icon="el-icon-check">
              <template #description>
                <span>采购时间:{{ detail.purchaseTime }}</span>
              </template>
              <template #icon>
                {{ detail.purchaseTime ? '✅' : 'X' }}
              </template>
            </el-step>

            <el-step title="装箱">
              <template #description>
                <div>装箱时间:{{ detail.boxTime }}</div>
                <div>批次名称:{{ detail.batchName }}</div>
                <div>箱号:{{ detail.boxNo }}</div>
              </template>
              <template #icon>
                {{ detail.boxTime ? '✅' : 'X' }}
              </template>
            </el-step>
            <el-step title="出运">
              <template #description>
                <span>出运时间:{{ detail.transportTime }}</span>
              </template>
              <template #icon>
                {{ detail.transportTime ? '✅' : 'X' }}
              </template>
            </el-step>
            <el-step title="入库">
              <template #description>
                <div>入库类型:{{ handleType('in', detail.inWarehouseType) }}</div>
                <div>入库时间:{{ detail.hitShelfTime }}</div>
              </template>
              <template #icon>
                {{ detail.hitShelfTime ? '✅' : 'X' }}
              </template>
            </el-step>
            <el-step title="出库">
              <template #description>
                <div>出库类型:{{ handleType('out', detail.outWarehouseType) }}</div>
                <div>出库时间:{{ detail.outWarehouseTime }}</div>
              </template>
              <template #icon>
                {{ detail.outWarehouseTime ? '✅' : 'X' }}
              </template>
            </el-step>
          </el-steps>
        </div>
        <div class="qr-search-content__right">
          <div class="qr-search-content__right_title">盘点记录</div>
          <el-table
            v-loading="loading"
            ref="TableRef"
            :data="detail.stockCheckVoList"
            row-key="menuId"
            style="width: 100%"
          >
            <!-- 库位      盘点类型     操作数量     操作后库存    盘点日期  -->
            <!-- 库位 -->
            <el-table-column align="center" show-overflow-tooltip prop="positionNo" label="库位" />
            <el-table-column align="center" show-overflow-tooltip prop="type" label="盘点类型">
              <template slot-scope="{ row }">
                <!--
                  1.扫码
                  2.手动+扫码
                -->
                <span v-if="row.type == 1"> 扫码</span>
                <span v-if="row.type == 2"> 手动+扫码</span>
              </template>
            </el-table-column>
            <el-table-column align="center" show-overflow-tooltip prop="stockSnap" label="操作数量" />
            <el-table-column align="center" show-overflow-tooltip prop="confirmNum" label="操作后库存" />
            <el-table-column align="center" show-overflow-tooltip prop="stockCheckTime" label="盘点日期" />
          </el-table>
          <!-- <pagination
            v-show="pageTotal > 0"
            :total="pageTotal"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          /> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { scrapOutWarehouse } from '@/api/distribution/sku/inventoryExpirationList'
import { getScanCodeInfo } from '@/api/distribution/sku/qrSearch'
import { useDict } from '@/utils/useDict'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  name: 'QrSearch',
  data() {
    return {
      out_warehouse_type_list: [],
      in_warehouse_type_list: [],
      search: '',
      detail: {},
      loading: false,
      pageTotal: 0,
      queryParams: {
        pageNum: 10,
        pageSize: 1,
      },
    }
  },
  created() {
    useDict('out_warehouse_type').then(({ out_warehouse_type }) => {
      this.out_warehouse_type_list = out_warehouse_type.filter((i) => i.dictName == '出库类型')
      this.in_warehouse_type_list = out_warehouse_type.filter((i) => i.dictName == '入库类型')
    })
  },
  mounted() {
    this.$refs.inputRef.focus()
  },
  methods: {
    handleType(_type, type) {
      if (_type == 'in') {
        const index = this.in_warehouse_type_list.findIndex((i) => i.dictValue == type)
        return this.in_warehouse_type_list[index]?.dictLabel
      } else {
        const index = this.out_warehouse_type_list.findIndex((i) => i.dictValue == type)
        return this.out_warehouse_type_list[index]?.dictLabel
      }
    },
    handleScrap() {
      if (!this.queryParams.outWarehouseType) {
        return this.$message({ type: 'error', message: '请选择出库类型' })
      }
      if (!this.queryParams.serializable) {
        return this.$message({ type: 'error', message: '请输入报废序列号' })
      }
      this.$confirm(this.$t('确认报废?'), this.$t('提示'), {
        type: 'warning',
      })
        .then(() => {
          const data = {
            serializable: this.queryParams.serializable,
            // 出库类型 18-过期出库
            outWarehouseType: this.queryParams.outWarehouseType,
          }
          scrapOutWarehouse(data).then((res) => {
            const { code, msg } = res
            if (code === 200) {
              this.$message({ type: 'success', message: msg })
              this.queryParams.outWarehouseType = ''
              this.queryParams.serializable = ''
            }
          })
        })
        .catch((e) => e)
    },
    getList() {},
    scanQrCode() {
      if (this.search) {
        getScanCodeInfo(this.search).then((res) => {
          const { code, data, msg } = res
          if (code === 200) {
            this.detail = { ...data }
          }
        })
      } else {
        this.$message.error('请扫码或输入')
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
$border: 2px solid #878383;

.container {
  min-height: calc(100vh - 84px);
  display: flex;
  align-items: center;
  justify-content: center;
  .qr-search {
    width: 90%;
    height: 800px;
    border: $border;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    &-header {
      width: 100%;
      height: 200px;
      padding: 30px;
      border-bottom: $border;
      &_info {
        margin-top: 10px;
        font-size: 15px;
        color: #524747;
      }
    }
    &-content {
      flex: 1;
      display: flex;
      &__left {
        padding: 30px;

        flex: 4;
        border-right: $border;
      }
      &__right {
        padding: 10px;

        flex: 5;
        &_title {
          font-weight: bold;
          margin-bottom: 10px;
        }
      }
    }
  }
}

::v-deep .el-step__icon {
  border-radius: 0;
  border: 2px solid;
}
</style>
